<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<%@ include file="../../common/jsp/sheetHeader.jsp" %>
<script>
	$(document).ready(function() {
		//sheet 초기화
		
		var ctgr = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
		var cfg = {
		    Chart : {
				Animation : true,
		        PlotBackgroundColor : "#FAFAFA",
				PlotBorderColor:"#A9AEB1",
		        PlotBorderWidth:0.5,
				BackgroundColor:{
					LinearGradient : [0,0,100,500],
					Stops : [
						[0, "#D7E1F3"],
						[1, "#FFFFFF"]
					]
				},
				BorderColor : "#84888B",
				Type : "spline",
				marginRight: 10
		    },
		    title: {
                text: 'Live random data'
            },
            XAxis : {
	            Labels:{
	 				Formatter:function(){
	 					var size = ctgr.length;
	            		var idx = this.value % size;
	                    return ctgr[idx];
	 				}
	 			}
		    },
		    YAxis : {
		    	Max:10,
		    	Min:0
		    },
            events : {
            	load : (function() {
            		setInterval(function() {
            			addPoint();
            		}, 1000);
            	})()
            },
            legend: {
                enabled: false
            },
            ToolTip: {
		    	formatter: function() {
		    		var size = ctgr.length;
            		var idx = this.point.x % size;
            		return ctgr[idx] + "<br>" + "Value : " + this.point.y;
		    	}
		    },
		};
		
		myChart.SetOptions(cfg);
		
		var data = [{ Data : [ 5, 10, 7, 2, 4, 1, 3, 8 ] }];
		
		myChart.SetSeriesOptions(data);
		myChart.Draw();
	});
	
	var redraw = true;
	var shift = true;
	
	function setOpt() {
		if (document.getElementById("sel_redraw").value=="true") {
			redraw = true;
		} else {
			redraw = false;
		}
		
		if (document.getElementById("sel_shift").value=="true") {
			shift = true;
		} else {
			shift = false;
		}
	}
	
	function addPoint() {
		var series = myChart.GetSeries(0);
		var value = Math.random() * 10;
		
		series.AddPoint(value, redraw, shift);
// 		series.AddPoint(value);
	}
	
</script>
<title>add point 예제</title>
</head>
<body>
<div id="main">
	<%@ include file="../../common/jsp/chartNavi.jsp" %>
	<div id="title">add point 예제</div>
	<div id="desc">
		Spline 형태로 주기적으로 정해진 시간에 따라 데이터를 차트에 추가한다.
	</div>

	<div id="functionArea">
		redraw 처리 여부 : 
		<select class="input_all" id="sel_redraw" title="">
			<option value="true" selected>사용</option>
			<option value="false" >사용안함</option>
		</select>
		,&nbsp;
		shift 처리 여부 : 
		<select class="input_all" id="sel_shift" title="">
			<option value="true">사용</option>
			<option value="false" selected>사용안함</option>
		</select>
		&nbsp;
		<input type="button" value="적용" onclick="setOpt()">
	</div>
	
	<div id="viewArea">
		<script type="text/javascript">
			createIBChart("myChart", "100%", "400px");
		</script>
	</div>
</div>
</body>
</html>